<template>
	<el-dialog v-model="dialogFormVisible" title="分支领域排名" width="1000">
		<el-row :gutter="20">
			<el-col :span="24">
				<div class="rank-item">
					<el-select v-model="state.queryForm.ipc" placeholder="请选择分支" size="large" style="width: 240px" @change="handleSelect">
						<el-option v-for="item in options" :key="item.ipc" :label="item.industryName" :value="item.ipc" />
					</el-select>
					<!-- <div class="title"></div> -->
					<el-table :data="state.dataList" border style="margin-top: 30px" v-loading="state.loading">
						<el-table-column property="inventorName" label="发明人" />
						<el-table-column property="patentCount" label="专利申请量" />
						<el-table-column property="rank" label="排名" />
					</el-table>
					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
				</div>
			</el-col>
		</el-row>
	</el-dialog>
</template>

<script setup lang="ts" name="Rank02">
const dialogFormVisible = ref(false);
import { getIpcRankListPage,getPatentIpcList } from '/@/api/cx/list';
import { BasicTableProps, useTable } from '/@/hooks/table';
const props = defineProps({
	talentId: {
		type: [Number, String],
	},
});

const ramkList = ref([]);

const options = ref([
]);
// table
const state = reactive<any>({
	queryForm: {
		talentId: props.talentId,
		ipc: '',
	},
	createdIsNeed:false,
	pageList: getIpcRankListPage,
});
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);
function open() {
	dialogFormVisible.value = true;
	getOptions().then(()=>{
		if(options.value.length>0){
			nextTick(()=>{
				state.queryForm.ipc = options.value[0].ipc
			})
			
		}
		getDataList()
	})
}
function handleSelect() {
	getDataList()
}

// 获取下拉列表
function getOptions(){
	let param = {
		talentId:props.talentId
	}
	return getPatentIpcList(param).then(res=>{
		if(res.code == 0){
			options.value = res.data
		}
	})
}
defineExpose({
	open,
});
</script>

<style lang="scss" scoped>
.title {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	span {
		font-size: 16px;
		margin-left: 5px;
	}
	&::before {
		display: block;
		content: '';
		width: 10px;
		height: 20px;
		background: var(--el-color-primary);
	}
}
.rank-item {
	margin-bottom: 20px;
}
</style>
